.select {
  @apply relative;

  & select {
    @apply pr-20 box-border appearance-none;
  }
}

.select--bare {
  @apply w-auto inline-block;
  @apply mt-0 !important;

  select {
    @apply inline-block pr-6;
    @apply shadow-transparent border-transparent bg-transparent;
    @apply focus:outline-none;
  }

  .select__icon {
    @apply w-6 border-l-0;
  }

  .input--negative + .select__icon {
    @apply bg-transparent;
  }
}

select:disabled,
.input--disabled select {
  @apply opacity-40;

  & + .select__icon {
    @apply opacity-40;
  }
}

.select__icon {
  @apply w-12 h-full;
  @apply flex items-center justify-center;
  @apply absolute top-0 right-0;
  @apply border-l border-text-500;
  @apply pointer-events-none;

  & svg {
    @apply w-8 h-full;
  }

  .input--negative + & {
    @apply text-white;
    @apply border-secondary-300;
    @apply bg-secondary-500;

    & svg {
      @apply fill-current;
    }
  }

  .input--error + & {
    @apply text-red-700 border-red-400;

    & svg {
      @apply fill-current;
    }
  }

  .input--error.input--negative + & {
    @apply text-red-200 border-red-300;

    & svg {
      @apply fill-current;
    }
  }
}

.input--negative option {
  @apply bg-secondary-600 hover:bg-secondary-500;
  @apply text-white;
}
